<div id="app">
    <admin-page-header back>
        <bi-button icon="fa-save" type="primary" @click="save">保存</bi-button>
    </admin-page-header>
    <div class="container">
        <bi-form ref="form">
        <div class="row g-2">
            <div class="col-12">
                <bi-card title="文章信息">
                    <template #action>
                        <bi-icon data="fa-gear" class="tool"  :class="{checked:setting}" @click="setting = !setting" ></bi-icon>
                    </template>

                    <bi-form-item label="标题" >
                        <bi-input v-model="form.title" :font-style="titleStyle" placeholder="请输入标题" required>
                            <template #after>
                                <bi-icon :data="titleStyleShow?'fa-angle-double-up':'fa-angle-double-down'" style="cursor: pointer; margin-right: 5px;" @click="titleStyleShow=!titleStyleShow" ></bi-icon>
                            </template>
                        </bi-input>
                        <title-style v-model="form.title_style" style="margin-top: 5px;" v-show="titleStyleShow" @change="titleStyleChange" ></title-style>
                    </bi-form-item>
                    
                    <bi-form-item label="栏目" >
                        <web-part  v-model="part_id"  required @change="partChange"  ></web-part>
                    </bi-form-item>

                    
                    <bi-form-item label="路由链接" >
                        <web-route  v-model="form.route" v-model:type="form.route_type"  :parent-part="part_id" ></web-route>
                    </bi-form-item>

                    <bi-form-item label="模板" v-show="setting && form.route_type!='link'" >
                        <web-template v-model="form.template" ></web-template>
                    </bi-form-item>
                    <bi-form-item label="模型"  v-show="setting">
                        <web-model v-model="article_model_id" type="article" ></web-model>
                    </bi-form-item>
            </bi-card>
            </div>
            <div class="col-12" v-if="model_id!=''">
                <bi-card title=""  >
                    <web-model-param ref="param" :model="model_id"  :data="param" ></web-model-param>
                </bi-card>
            </div>

            <div class="col-12"  v-if="form.route_type!='link'">
                <bi-card title="文章内容"  >
                    <admin-editor v-model="form.content" ></admin-editor>
                    <template #footer>
                        <bi-button icon="fa-save" type="primary" @click="save">保存</bi-button>
                    </template>
                </bi-card>
            </div>
        </div>
        </bi-form>
    </div>
</div> 


<script>
import webPart from 'field/part.vue';
import webModel from 'field/model.vue';
import webRoute from 'field/route.vue';
import webModelParam from 'field/model-param.vue';
import webTemplate from 'field/template.vue';
import titleStyle from 'article/title-style.vue';
let app = admin.createApp({
    components:{
        webPart,
        webModel,
        webModelParam,
        webRoute,
        webTemplate,
        titleStyle
    },
    data(){

        let form = {
            article_id:'',
            title:'',
            part_id:'',
            route:"",
            route_type:'default',
            template:'',
            model_id:'',
            content:'',
            title_style:''
        }

        let part_model_id = '';
        let article_model_id = '';
        let part_id = this.$pageData.part_id??'';

        let param = {};
        this.$assign(form, this.$pageData.article);
        if (this.$pageData.param) param = this.$pageData.param;

        if (this.$pageData.part_model_id) part_model_id = this.$pageData.part_model_id;
        
        if (this.$pageData.article){
            article_model_id = form.model_id;
            part_id = form.part_id;
        }
        

        let titleStyleShow =  this.$user.getLocalStorage('web-article-edit-title-style-show')??false;

        return {
            article_model_id,
            part_model_id,
            part_id,
            form,
            param,
            titleStyleShow,
            titleStyle:{},
            setting:false
        }
    },
    watch:{
        article_model_id:{
            handler(value){
                this.form.model_id = this.article_model_id;
            }
        },
        titleStyleShow(val){
            this.$user.setLocalStorage('web-article-edit-title-style-show',val);
        }
    },
    computed:{
        model_id:{
            get(){
                if (this.article_model_id!='' && this.article_model_id!=null){
                    return this.article_model_id;
                }

                if (this.part_model_id!='' && this.part_model_id!=null){
                    return this.part_model_id;
                }

                return '';
            }
        }
    },
    methods:{
        save(){
            
            console.log('d');

            if (this.form.route_type=='root' || this.form.route_type=='parent'){
                if (this.form.route==''){
                    this.$alert('路由不能为空');
                    return ;
                }
            }

            if (this.form.route_type=='link' && this.form.route==''){
                this.$alert('链接不能为空');
                return ;
            }
           
            if (this.$refs.form.check()){
                this.form.part_id = this.part_id;
                
                let param = {};
                if (this.$refs.param){
                    if (!this.$refs.param.check()){
                        return ;
                    }

                    param = this.$refs.param.getData();
                }
                
              
                this.$ajax({
                    url:this.$url({action:'save'}),
                    data:{
                        ...this.form,
                        param
                    },
                    success:(res)=>{
                        this.$go(-1);
                    }
                });
                
            }else{
                console.log('d');
            }
        },
        partChange(part){
            if (part){
                this.part_model_id = part.article_model_id;
            }else{
                this.part_model_id = '';
            }
        },
        titleStyleChange(str,sytle){
            this.titleStyle = sytle;
        }
    }
}).mount('#app');    
</script>

<style>
.tool{
    margin-left: 10px;
    color: var(--bs-gray-700);
    cursor: pointer;
}
.tool:hover{
    color: var(--bs-gray-900);
}

.tool.checked{
    color: var(--bs-primary);
}

</style>